<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 1rem    html的字体大小
      1vw     视口宽度的1%
      1vh     视口高度的1% */
      /* width: 10vw;
          height: 10vw; */

      /* 100vw = 750px 宽度750的视口
      1vw = 7.5px
      1rem = 100px
      1rem = 13.3vw*/
      html {
        font-size: 13.3vw; /*  =100px */
      }
      #tabbar {
        width: 100%;
        height: 1rem; /*移动端的值  88px */
        position: fixed;
        background-color: white;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-around;
        padding-top: 0.1rem;
        border: 0.01rem solid #a4afb2;
      }
      #tabbar .iconfont {
        font-size: 0.5rem;
      }
      #tabbar a {
        text-align: center;
        font-size: 0.1rem;
        color: #a4afb2;
      }
      #tabbar .active {
        color: #0092d8;
      }
      #search {
        width: 100%;
        height: 1rem; /*移动端的值  88px */
        position: fixed;
        background-color: #2d42c1;
        top: 0;
        left: 0;
        display: flex;
        justify-content: space-around;
        padding-top: 0.1rem;
        line-height: 1rem;
      }
      #search input {
        margin-top: 0.15rem;
        width: 5rem;
        height: 0.5rem;
        padding-left: 0.5rem;
      }
      #nav {
        width: 90%;
        height: 1.5rem;
        margin: 0 auto;
        background-color: #f6f6f6;
        display: flex;
        justify-content: space-around;
        margin-top: 1.5rem;
        text-align: center;
      }
      #nav a {
        line-height: 0.5rem;
        color: #a4afb2;
      }
      #nav a span {
        width: 0.5rem;
        margin-top: -0.5rem;
        font-size: 0.4rem;
        color: black;
      }
      #nav p {
        font-size: 0.2rem;
      }
      #nav .active {
        color: #ff6600;
      }
      #list {
        width: 90%;
        margin: 0 auto;
        background-color: #f6f6f6;
        overflow: hidden;
        margin-bottom: 1.5rem;
      }
      /*  #list ul li {
        clear: both;
      } */
      #list ul li {
        background-color: white;
        text-align: center;
        width: 47%;
        height: 5.5rem;
        float: left;
        margin: 0 2% 2% 1%;
        text-align: center;
      }
      #list ul li img {
        display: block;
        margin: 0.5rem auto;
        width: 3rem;
        height: 2rem;
        border: 1px solid;
      }
      #list li span {
        display: block;
        font-size: 0.3rem;
        line-height: 0.4rem;
        height: 1.8rem;
      }
      #list li p {
        font-size: 0.4rem;
        color: #ff6600;
        text-align: left;
        position: relative;
      }
      #list li p .iconfont {
        position: absolute;
        right: 0.3rem;
        top: 0.2rem;
        font-size: 0.5rem;
        margin-left: -0.5rem;
      }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.0.0-alpha.1/axios.min.js"></script>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <div v-if="type==1">
          <div id="search">
            <span class="iconfont icon-sousuo"></span
            ><input type="text" placeholder="输入你想要的商品" />
            <span class="iconfont icon-rili"></span>
            <span class="iconfont icon-kefu"></span>
          </div>
          <div id="nav">
            <a href="" class="active">
              <span>活动</span>
              <p>购物享好价</p>
            </a>
            <a href="">
              <span>厨房</span>
              <p>精致生活</p>
            </a>
            <a href="">
              <span>卫浴</span>
              <p>烧水不等待</p>
            </a>
            <a href="">
              <span>卧室</span>
              <p>舒适睡眠</p>
            </a>
            <a href="">
              <span>客厅</span>
              <p>智能精选</p>
            </a>
          </div>
          <div id="list">
            <ul>
              <li v-for="(item,index) in listArr">
                <img :src="item.pic_url" alt="" />
                <span>{{item.dis_sku_title}}</span>
                <p>
                  ￥{{item.active_price/100}}
                  <span class="iconfont icon-gouwuche"></span>
                </p>
              </li>
            </ul>
          </div>
        </div>
        <div v-else-if="type==2">
          <h2>分类</h2>
        </div>
        <div v-else-if="type==3">
          <h2>分类3</h2>
        </div>
        <div v-else-if="type==4">
          <h2>分类4</h2>
        </div>
        <div v-else>
          <h2>分类5</h2>
        </div>
      </div>
      <div id="tabbar">
        <a class="active" @click="type=1"
          ><span class="iconfont icon-shouye"></span>
          <p>首页</p></a
        >
        <a @click="type=2"
          ><span class="iconfont icon-fenlei"></span>
          <p>分类</p></a
        >
        <a @click="type=3"
          ><span class="iconfont icon-aixin"></span>
          <p>美的生活</p></a
        >
        <a @click="type=4"
          ><span class="iconfont icon-gouwuche"></span>
          <p>购物车</p></a
        >
        <a @click="type=5"
          ><span class="iconfont icon-wo"></span>
          <p>我</p></a
        >
      </div>
    </div>
    <!-- 选项卡 -->
    <script>
      /* 数据展示 */
      let vm2 = new Vue({
        el: "#app",
        data() {
          return {
            listArr: [],
            type: 1,
          };
        },
        methods: {
          async getList() {
            let res = await axios({
              url: "https://m.midea.cn/next/skupool/getpoolv2?t=0.3366192071952676&id=3371&pageno=1&pagesize=10",
            });
            let data = res.data.data.data.SkuList;
            console.log(data);
            this.listArr = data;
          },
        },
        created() {
          if (this.type == 1) {
            this.getList();
          }
        },
      });
    </script>
  </body>
</html>
